<template>
  <div class="inputData">
    <section class="header">
      <i class="iconfont iconfanhui1" @click="goBack()"></i>
      <span @click="goBack()">批量导入</span>
    </section>
    <div class="img">
      <img src="../assets/img/input.jpg" alt="" />
    </div>
    <p>批量导入员工</p>
    <h4>请先下载系统提供的Excel模板准备员工列表 然后保存并上传该Excel表格</h4>
    <div class="download" @click="downloadFile()">下载模板</div>
    <div class="upImg">
      上传
      <input
        ref="inputData"
        id="inputId"
        type="file"
        title=""
        accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
        @change="uploadFile($event)"
      />
    </div>
  </div>
</template>

<script>
import { requestImportPerson } from "../api/api";
import { reqRep } from "../report/reqReport";
import { resRep } from "../report/resReport";
export default {
  name: "inputData",
  data() {
    return {};
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    //前端本地下载文件
    downloadFile() {
      let a = document.createElement("a");
      a.href = "/qq/static/template.xls";
      //路径中'/'为根目录，即index.html所在的目录
      a.download = "员工导入模板";
      a.click();
    },
    uploadFile(e) {
      //97-2003的xls文件
      //必须.xls结尾文件
      if (e.target.files[0].type != "application/vnd.ms-excel") {
        this.$message.warning("只能上传.xls格式的文件!");
        return false;
      }
      let file = e.target.files[0];
      let companyId = this.$route.query.companyId;
      let platformId = this.$route.query.platformId;

      requestImportPerson(file, companyId, platformId).then((data) => {
        let resReport = resRep(data);
            //清空初始化
        e.target.value = "";
        if (resReport.getReCode() != "0000") {
          this.$message({
            message: resReport.getReMsg(),
            type: "error",
          });
        } else if (resReport.data.fail >= 1) {
          this.$confirm(resReport.data.failMsg.replace(/<br>/g, "\n"), "提示", {
            type: "error",
            showClose: false,
            showCancelButton: false,
            confirmButtonText: "确定",
          }).then(() => {});
        } else {
          this.$message.success("上传成功");
          this.goBack();
        }
      });
    },
  },
  created() {},
};
</script>
<style scoped>
.header {
  padding: 15px;
  height: 50px;
  box-sizing: border-box;
  font-size: 14px;
  border-bottom: 1px solid #eee;
}
.header i {
  cursor: pointer;
  margin-right: 5px;
}
.header span {
  cursor: pointer;
}
.img {
  margin: 35px auto;
  padding-top: 55px;
  width: 123px;
}
p {
  font-size: 20px;
  text-align: center;
}
h4 {
  text-align: center;
  color: #666;
  font-size: 14px;
  padding: 20px;
}
.download {
  text-align: center;
  height: 48px;
  line-height: 48px;
  width: 168px;
  color: #444;
  border-radius: 3px;
  font-size: 16px;
  width: 100px;
  margin: 0 auto;
  text-align: center;
  cursor: pointer;
  border: 1px solid #999;
}
.upImg {
  position: relative;
  text-align: center;
  height: 40px;
  line-height: 40px;
  color: #fff;
  border-radius: 3px;
  font-size: 16px;
  width: 200px;
  margin: 20px auto;
  text-align: center;
  background-color: #13cb6e;
}
.upImg input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
</style>
